<template>
  <div ref="container" class="container"></div>
</template>
<script setup lang="ts">
import * as THREE from "three";
import { ref, onMounted } from "vue";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
//初始换场景
const scene = new THREE.Scene();

//创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

//设置相机的位置
camera.position.set(0, 0, 0.01); //轨道0.01才能动

//矩形里面看房
const useRect = () => {
  //房屋照片集合  材质
  const materials: THREE.MeshBasicMaterial[] = [];

  //一间屋子有  上下左右前后  六个面  所以创建6面墙的图片   现在是放在一个正方体里面了   （球体的话要全景相机拍摄）

  const texture_right = new THREE.TextureLoader().load("./images/chuFang.jpg");
  materials.push(new THREE.MeshBasicMaterial({ map: texture_right }));

  const texture_left = new THREE.TextureLoader().load("./images/ciWo.jpg");
  materials.push(new THREE.MeshBasicMaterial({ map: texture_left }));

  const texture_front = new THREE.TextureLoader().load("./images/zhuWo.jpg");
  materials.push(new THREE.MeshBasicMaterial({ map: texture_front }));

  const texture_back = new THREE.TextureLoader().load("./images/menTing.jpg");
  materials.push(new THREE.MeshBasicMaterial({ map: texture_back }));

  const texture_top = new THREE.TextureLoader().load("./images/shuFang.jpg");
  materials.push(new THREE.MeshBasicMaterial({ map: texture_top }));

  const texture_bottom = new THREE.TextureLoader().load("./images/keTing.jpg");
  materials.push(new THREE.MeshBasicMaterial({ map: texture_bottom }));

  //创建几何体   宽高深  据图文档可以启动three源码查看docs文档
  const geomertry = new THREE.BoxGeometry(10, 10, 10);

  //创建材质  vr看房，后面还是图片包裹  材质随意设置 看中文
  // const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); //材质放背景图以后不要了

  //创建网格
  const box = new THREE.Mesh(geomertry, materials);
  box.geometry.scale(1, 1, -1); //反转z轴 把图片贴到里面去

  // 放入场景
  scene.add(box);
};

//球体看房  需要专业的相机拍摄
const useSphere = () => {
  const sphereGeometry = new THREE.SphereGeometry(1, 50, 50); //半径 经纬上的分段数
  const texture = new THREE.TextureLoader().load("./images/qiuTi.jpg");
  const sphereMaterial = new THREE.MeshBasicMaterial({ map: texture });
  const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  sphere.geometry.scale(1, 1, -1);
  scene.add(sphere);
};

// useRect(); //矩形看房
useSphere(); //球形看房

// 视口监听
window.addEventListener("resize", () => {
  //随着视口变化更新宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新相机的投影矩阵
  camera.updateProjectionMatrix();
  // 更新渲染前的大小
  renderer.setSize(window.innerWidth, window.innerHeight);
});

//添加坐标辅助器
const axesHelper = new THREE.AxesHelper(20); //参数是轴线长度
scene.add(axesHelper);
//控制器
let controls: OrbitControls;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();

//设置渲染器的大小
renderer.setSize(window.innerWidth, window.innerHeight);

const container = ref<HTMLElement | null>(null);

const render = () => {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
  //requestAnimationFrame: 在浏览器下一次重绘之前调用指定的回调函数，确保动画与页面刷新同步，从而实现更流畅的动画效果。
  // 相比 setTimeout 或 setInterval，requestAnimationFrame 更加效率高，能自动调整动画帧率（通常是 60fps），并在标签切换或页面隐藏时自动暂停。
  // 在函数内可以更新元素位置、样式等，实现动画效果
  // 不断调用自我（递归）实现连续动画
};
onMounted(() => {
  if (container.value) {
    controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true; //阻尼感
    controls.update();
    container.value.appendChild(renderer.domElement);
    render();
  }
});
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100vw;
  height: 100vh;
  background-color: #000;
}
</style>
